<script setup lang="ts" name="StudyList">
import MenuBar from '@/views/components/menuBar/index.vue';
import DataSync from './components/data-sync/index.vue'
import InfoEdit from './components/info-edit/index.vue'
import LocalSetting from './components/local-setting/index.vue'
import {onTabMessage} from '@/utils/windowTool'
import {getStudyPage} from '@/api/study'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
/*========================================>( 模板属性 )<========================================*/
//是否加载中
const loading = ref<boolean>(false)
//总数据量
const total = ref<number>(0)
//全部数据
const tableData = ref<Array<any>>([])

//筛选参数
const queryParams = ref<{ [key: string]: any }>({
	name: undefined,
	age: undefined,
	gender: undefined,
	device: undefined,
	date: undefined
})
//分页参数
const currentPage = ref<number>(1)
const pageSize = ref<number>(15)
//是否显示信息编辑框
const showInfoModal = ref<boolean>(false)
//正在编辑的id
const editId = ref<string>()
//bar的菜单
const menuBarMenus = ref<Array<any>>([
	{
		name:'设置',
		icon:'setting',
		childrens:[
			{
				name:'本机配置',
				icon:'setting',
				mark:'setting'
			},
			// {
			// 	name:'数据同步',
			// 	icon:'reset',
			// 	mark:'dataSync'
			// },
			{
				name:'重置所有数据',
				icon:'reset',
				mark:'reset'
			},
			{
				name:'关于..',
				icon:'info',
				mark:'about'
			}
		]
	}
])

const showSettingModal = ref<boolean>(false)

const showDataSync = ref<boolean>(false)

/*========================================>( dom属性 )<========================================*/
const domSearchForm = ref()

/*========================================>( 计算属性 )<========================================*/
//计算分页数据
// const tableData = computed(() => {
// 	const reslist = []
// 	for (const [index, o] of tableData.value.entries()) {
// 		if (index >= pageSize.value * (currentPage.value - 1) && index < pageSize.value * currentPage.value) {
// 			//读取报告状态TODO
// 			reslist.push(o)
// 		}
// 	}
// 	return reslist
// })

/*========================================>( 作用域属性 )<========================================*/
//异步IPC
const _ipcs = {
	openDcm: (path: string) => {
		window.$.send('DCMVIEW-OPEN-WINDOW', { path })
	},
	openReport: (id: string) => {
		window.$.send('REPORT-OPEN-WINDOW', { id })
	},
	resetApp:()=>{
		window.$.send('CACHE-RESET')
	},
	openAboutWindow:()=>{
		window.$.send('OPEN-ABOUT-US-WINDOW')
	}
}
const _shortcuts = [
	{
		text: '今日',
		value: () => {
			const start = new Date()
			return [start, start]
		},
	},
	{
		text: '一周内',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
			return [start, end]
		},
	},
	{
		text: '一个月内',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			return [start, end]
		},
	},
	{
		text: '三个月内',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			return [start, end]
		},
	},
]
/*========================================>( 普通方法 )<========================================*/
//初始化监听
const initListener = () => {
	//监听需要刷新
	onTabMessage('LIST-NEED-REFRESH',()=>{
		getList()
	})
}
//查询数据
const getList = async() => {
	loading.value = true
	const data = await getStudyPage(queryParams.value)
	loading.value = false
	console.log('请求到数据',data)
	total.value = data.total
	tableData.value = data.rows
}
/*========================================>( 监听方法 )<========================================*/
//去往报告页面
const handleClickReport = (id: string) => {
	_ipcs.openReport(id)
}
//去往阅片界面 id即为path
const handleViewDcm = (path: string) => {
	_ipcs.openDcm(path)
}

//监听查询
const handleSearch = () => {
	getList()
}
//监听重置查询表单
const handleClearSearch = () => {
	domSearchForm.value?.resetFields()
}

//监听修改患者信息
const handleEditInfo = (id:string) => {
	editId.value= id
	showInfoModal.value = true
}

//监听关闭修改患者信息
const handleEditClose = (e:any) => {
	const {refresh} = e
	showInfoModal.value = false
	if(refresh){
		getList()
	}
}

//监听标题栏菜单被点击
const handleMenuBarSelected = (mark:string) => {
	switch(mark){
		case 'setting':
			showSettingModal.value = true
			break;
		case 'dataSync':
			showDataSync.value = true
			break;
		case 'reset':
			proxy?.$modal.confirm('仅限测试环境使用').then(()=>{
				_ipcs.resetApp()
			})
			break;
		case 'about':
			_ipcs.openAboutWindow()
			break;
	}
}

//监听设置面板关闭
const handleLocalSettingClose = (e:any) => {
	showSettingModal.value = false
	if(e.refresh) getList()
}

//监听同步面板关闭
const handleDataSyncClose = (e:any) => {
	showDataSync.value = false
	if(e.refresh) getList()
}



/*========================================>( 钩子 )<========================================*/
onMounted(() => {
	initListener()
	getList()
})
</script>
<template>
	<MenuBar title="雨田PACS：检查列表" bar-color="#222" :menus="menuBarMenus" @select="handleMenuBarSelected" />
	<div class="main-content study-list" v-loading="loading">
		<div class="operate-pad">
			<el-form ref="domSearchForm" :model="queryParams" label-width="40px" label-position="left" class="rw-90 m-auto m-c-10-0">
				<el-form-item label="时间" prop="date">
					<el-date-picker
						v-model="queryParams.date"
						type="daterange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:shortcuts="_shortcuts"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item label="设备" prop="device">
					<el-checkbox-group v-model="queryParams.device">
						<el-checkbox label="dx">DX</el-checkbox>
						<el-checkbox label="mr">MR</el-checkbox>
						<el-checkbox label="ct">CT</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="queryParams.name" placeholder="模糊查询姓名" />
				</el-form-item>
				<el-form-item label="性别" prop="gender">
					<el-radio-group v-model="queryParams.gender">
						<el-radio :label="undefined">全部</el-radio>
						<el-radio label="1">男</el-radio>
						<el-radio label="0">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="queryParams.age" placeholder="请输入年龄" />
				</el-form-item>
				<el-form-item>
					<el-button type="info" icon="RefreshLeft" @click="handleClearSearch">清空</el-button>
					<el-button type="primary" icon="Position" @click="handleSearch">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="list-pad">
			<el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" height="calc(100vh - 92px)">
				<el-table-column type="index" label="序号" width="80" />
				<el-table-column prop="name" label="姓名" sortable />
				<el-table-column prop="locate" label="部位" sortable>
					<template #default="scope">
						{{scope.row.locate??'-'}}
					</template>
				</el-table-column>
				<el-table-column prop="device" label="设备" sortable />
				<el-table-column label="性别" sortable>
					<template #default="scope">
						<el-tag v-if="scope.row.gender == 1" type="primary">男</el-tag>
						<el-tag v-else type="danger">女</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="age" label="年龄" sortable />
				<el-table-column prop="date" label="影像时间" sortable />
				<el-table-column prop="printnum" label="打印次数" sortable>
					<template #default="scope">
						<el-text v-if="scope.row.printnum === 0" class="mx-1" type="info">{{ scope.row.printnum }}</el-text>
						<el-text v-else class="mx-1" type="success">{{ scope.row.printnum }}</el-text>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template #default="scope">
						<el-button type="info" icon="Notebook" link @click="handleEditInfo(scope.row.id)">信息</el-button>
						<el-button type="primary" icon="View" link @click="handleViewDcm(scope.row.id)">阅片</el-button>
						<el-button v-if="scope.row.status == 1" type="warning" icon="Edit" link @click="handleClickReport(scope.row.id)">修改</el-button>
						<el-button v-else type="success" icon="EditPen" link @click="handleClickReport(scope.row.id)">编写</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="total, prev, pager, next" :total="tableData.length" class="p-c-10-10" v-model:current-page="currentPage" v-model:page-size="pageSize" />
		</div>
		<InfoEdit v-if="showInfoModal" :id="editId" @close="handleEditClose" />
		<LocalSetting v-if="showSettingModal" @close="handleLocalSettingClose" />
		<DataSync v-if="showDataSync" @close="handleDataSyncClose"/>
	</div>
</template>
<style lang="scss">
.main-content.study-list {
	width: 100vw;
	height: calc(100vh - 40px);
	background-color: #555;

	.operate-pad {
		float: left;
		width: 300px;
		height: 100%;
		background-color: #222;

		.el-checkbox__label {
			color: #ccc;
		}

		.el-form-item__label {
			color: #ccc;
		}
	}

	.list-pad {
		float: left;
		width: calc(100vw - 300px);
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.el-table {
			background-color: #666;
			border-bottom: solid 1px #666;

			thead {
				tr {
					th {
						background-color: #444 !important;
						color: #fff;
						border-bottom: solid 1px #666;
					}
				}
			}

			tr {
				td {
					background-color: #444;
					color: #fff;
					border-bottom: solid 1px #666;
				}
			}
		}

		.el-pagination__total {
			color: #ccc;
		}
	}
}
</style>
<style lang="scss" scoped></style>
